<script setup>
import axios from 'axios';
import { onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import ButtonVue from '../button/button.vue';

const router = useRouter();
const cardInfo = "";

// onMounted(()=>{
//     axios.get()
//     .then((resp)=>{
//         if(resp.code==200){
//             cardInfo = resp.data
//         }else if(resp.code==400){
//             router.push({path:''})
//         }
//     })
//     .catch((e)=>{
//         router.push({path:'/login'})
//     })
// })

</script>

<template>
    <div v-if="cardInfo!=null" class="box">
        <h2>付款详情</h2>
        <div class="info-box">
            <li>
                <span>客户账户</span>
                <p>6300000000000000000</p>
            </li>
            <li>
                <span>客户名称</span>
                <p>张三</p>
            </li>
            <li>
                <span>客户类型</span>
                <p>客户类型</p>
            </li>
            <li>
                <span>付款金额</span>
                <p>320.22</p>
            </li>
            
        </div>
        <ButtonVue btn-name="钱包余额付款" btn-color="blue"></ButtonVue>

        <div class="info-box">
            <li>
                <span class="iconfont">&#xe68a;</span>
                <p>6300111122223333456</p>
                
            </li>          
        </div>

        <ButtonVue btn-name="银行卡付款" btn-color="blue"></ButtonVue>
    </div>
</template>
<style scoped>
.iconfont {
    font-family: "iconfont" !important;
    font-size: 20px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    color: #f37309;
}
*{
    margin: 0;
    list-style: none;
}
.box{
    padding-top: 10px;
    /* background-color: rgb(241, 240, 240); */
}
h2{
    margin: 0px 10px 10px;
    font:normal 400 16px 'Serif';
}
.info-box{
    margin: 0 10px 10px;
    background-color: #fff !important;
}
.info-box::after{
    display: block;
    content: "";
    clear: both;
}
li{
    width: 100%;
    border-top: 1px solid lightgray;
}
li::after{
    display: block;
    content: "";
    clear: both;
}
span,p{
    padding: 5px
}
span{
    float: left;
    width: 26%;
    color: rgb(128, 127, 127);
    text-indent: 12px;
}
p{
    float:right;
    width: 64%;
    color: rgb(19, 173, 224);
}
</style>